<template>
    <div class="login-box w100 h100">
        <div class="login-box-content bg-fff">
            <div class="login-header df fd-c ai-c">
                <img src="../imgs/logo.png" alt="" style="width: 6rem" />
                <span class="f-mt-10">Esign 后台管理系统</span>

                <el-form ref="formRef" :model="form" :rules="rules" class="f-mt-20 w100" label-position="top"
                    @submit.prevent="onLogin">
                    <el-form-item label="账号" prop="loginAccount">
                        <el-input v-trim v-model="form.loginAccount" placeholder="请输入" maxlength="8" />
                    </el-form-item>
                    <el-form-item label="密码" prop="loginPassword">
                        <el-input v-trim v-model="form.loginPassword" type="password" show-password placeholder="请输入"
                            maxlength="20" />
                    </el-form-item>
                    <button type="submit" class="el-button el-button--primary w100 f-mt-10">登录</button>
                </el-form>
            </div>
        </div>
        <div class="footer f-center df fd-c ai-c jc-c c777">
            <p>© 2019-2025 成都汇智云听</p>
            <p class="f-fs-12 f-mt-10">
                <span>川公网安备5101702002221号</span>
                <span class="f-ml-20">蜀ICP备2020035281号</span>
            </p>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import api from '@/apis/base';
import { useUserStore } from '@/stores/user';
import { getStore, setStore } from '@/utils/utils';
import type { Ilogin, IchangePWd } from '@/types/baseMoudle';
import type { FormInstance, FormRules } from 'element-plus';
const userStore = useUserStore();

onMounted(() => {
    userStore.logout();
    getConifg();
});

const getConifg = () => {
    api.getConifg().then(res => {
        if (!res || res.code != 1) return;
        userStore.setConfig(res.data);
    });
};

const $router = useRouter();
const formRef = ref<FormInstance>();

const loading = ref(false);
const form = reactive<Ilogin>({
    loginAccount: 'sysadmin',
    loginPassword: '12345a',
});

const onLogin = () => {
    formRef.value &&
        formRef.value.validate(async valid => {
            if (valid) {
                loading.value = true;
                const reslut = await api.login(form);

                if (!reslut) {
                    loading.value = false;
                    return;
                }

                // 需要TFA认证
                if (reslut.code == 616) {
                    setStore('esign-admin-acount', {
                        loginAccount: form.loginAccount,
                        loginPassword: form.loginPassword,
                        isTFA: 616,
                    });
                    $router.push('/TFA');
                    return;
                }

                // FTA认证后，不需要扫码，只填验证码
                if (reslut.code == 615) {
                    setStore('esign-admin-acount', {
                        loginAccount: form.loginAccount,
                        loginPassword: form.loginPassword,
                        isTFA: 615,
                    });
                    $router.push('/TFA');
                    return;
                }

                // 直接修改密码
                if (reslut.code == 617) {
                    setStore('esign-admin-acount', {
                        loginAccount: form.loginAccount,
                        loginPassword: form.loginPassword,
                    });
                    $router.push('/change-pwd');
                    return;
                }

                if (reslut.code != 1) {
                    loading.value = false;
                    return;
                }

                loginHandle(reslut.data);
            }
        });
};

import usePermission from '@/hooks/usePermission';
const { getAllPermissionCodes } = usePermission();

//获取并保存权限信息
const loadPermissions = async () => {
    try {
        const permissionCodes = await getAllPermissionCodes();
        setStore('esign-admin-permissionCodes', permissionCodes);
    } catch { }
};

// 登录处理
const loginHandle = (data: any) => {
    const { access_Token } = data;
    userStore.setUserInfo(data);
    userStore.setToken(access_Token);
    //登录成功后加载权限信息
    loadPermissions();
    $router.push('/home');
};

const rules = reactive({
    loginAccount: [
        { required: true, message: '请输入账号', trigger: 'blur' },
        { pattern: /^[A-Za-z0-9]{8}$/, message: '账号只允许输入数字或字母，长度为8位', trigger: 'blur' },
    ],
    loginPassword: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        {
            pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,20}$/,
            message: '密码为6,20位，包含数字和字母',
            trigger: 'blur',
        },
    ],
});
</script>

<style scoped lang="scss">
.login-box {
    background: url('../imgs/bg.jpg') no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;

    .login-box-content {
        width: 50rem;
        padding: 8rem;
    }
}

:deep(.el-input__inner) {
    height: 4.6rem;
}

:deep(.el-button) {
    height: 4.6rem;
    background: #2258f6;
    color: #fff;
    border: none;
    cursor: pointer;
}

:deep(.el-form-item__label:before) {
    content: '' !important;
}

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60px;
    color: #333333;
}
</style>
